<template>
  <div class="user">
    <div class="user-filter">
      <span>筛选条件</span>
      <el-select
        v-model="activityStatus"
        clearable
        style="width:150px;"
        placeholder="活动状态"
        @change="handleFilter"
      >
        <el-option
          v-for="item in activityStatuses"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <div class="user-keyword">
      <span>关键词</span>
      <el-select v-model="indentity" style="width:165px;" @change="handleFilter">
        <el-option
          v-for="item in indentity"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input v-model="content" style="width:200px" placeholder="请输入关键词搜索"/>
      <el-button type="primary" style="margin-left:10px;" plain @click="handleFilter">搜索</el-button>
      <el-button type="primary" plain>导出</el-button>
    </div>
    <el-divider content-position="left" name="a">共{{ total }}条数据</el-divider>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="account" label="代理商账号" min-width="10" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="accountDetail(scope.row)">{{ scope.row.account }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="identity" label="机构/个人名称" min-width="10" align="center"/>
      <el-table-column prop="activeStatus" label="活动状态" min-width="10" align="center">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.state"/>
        </template>
      </el-table-column>

      <el-table-column label="操作" min-width="10" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="examineBtn(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="examineDialogVisible" title="代理商信息" width="50%">
      <el-tabs v-model="activeName">
        <el-tab-pane label="账户信息" name="first">
          <div class="labelBox">
            <span class="labelTitle">代理商账号：</span>
            <span>{{ examineInfo.account }}</span>
          </div>
          <div class="labelBox">
            <span class="labelTitle">代理商账号：</span>
            <span>{{ examineInfo.tel }}</span>
          </div>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="examineDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="examineDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {

  data() {
    return {
      content: '',
      activityStatus: '',
      indentity: [],
      activityStatuses: [
        {
          label: '开启',
          value: '开启'
        },
        {
          label: '关闭',
          value: '关闭'
        }
      ],
      tableData: [
        {
          account: 'RickyKu',
          tel: '13582331544',
          identity: '北美机构',
          state: true
        }
      ],
      examineDialogVisible: false,
      activeName: 'first',
      examineInfo: {
        account: '',
        tel: ''
      }
    }
  },
  computed: {
    total() {
      return this.tableData.length
    }
  },
  created() {
    this.getTable()
  },
  methods: {
    async getTable() {
      const { data: res } = await this.$http.get('https://www.easy-mock.com/mock/58fffb27739ac1685205b05a/nba/tabelinfo')
      this.tableData = res.data.table
    },
    handleFilter() { },
    accountDetail(val) {
      this.examineDialogVisible = true
    },
    examineBtn(val) {
      this.examineDialogVisible = true
      this.examineInfo.account = val.account
      this.examineInfo.tel = val.tel
    }
  }
}
</script>

<style lang="scss" scoped>
.user {
  &-filter,
  &-keyword {
    font-size: 14px;
    color: #606266;
    margin: 15px 0;
    span {
      margin-right: 10px;
    }
  }
}
.labelBox {
  margin: 20px 0;
  .labelTitle {
    display: inline-block;
    width: 120px;
    text-align: right;
  }
}
</style>
